<template>
<div>
    <div class="headtitle"> 
       {{title}}
    </div>
    <div class="conditionForm"> 

    <el-form :inline="true" ref="queryForm" :model="queryForm">
  <el-form-item label="用户编号">
    <el-input v-model="queryForm.uid"  placeholder="用户编号"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button @click="getList()" type="primary">查询</el-button>
  </el-form-item>
  </el-form>

  </div>
  
  
     <div class="table">
    <el-table
      :data="tableData"
      border
      style="width: 100%;text-align:center">

      <el-table-column
        prop="id"
        label="订单编号"
        width="180px"
        >
      </el-table-column>

       <el-table-column
        prop="uid"
        label="用户编号"
        width="180px"
       >
      </el-table-column>

       <el-table-column
        prop="payPrice"
        label="应支付价格"
        >
      </el-table-column>
       
       <el-table-column
        prop="createtime"
        label="创建时间"
        >
      </el-table-column>
       <el-table-column
        prop="updatetime"
        label="更新时间"
        >
      </el-table-column>
       <el-table-column
        prop="status"
        label="状态"
        >
      </el-table-column>
       <el-table-column
        width="300px"
        prop="address"
        label="收货地址"
        >
      </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="showEditDialog(scope.row)" type="text" size="small">修改</el-button>   
        <!-- <el-button @click="" type="text" size="small">删除</el-button>       -->
      </template>
    </el-table-column>
    </el-table>
 <el-pagination class="pageSty"
  background
  layout="prev, pager, next"
  :current-page.sync="queryForm.pageNo"
  :page-size="queryForm.pageSize"
  :total="queryForm.recordTotal"
  @current-change="handleCurrentChange"
  >
   </el-pagination>
     </div>
   
  <el-dialog title="修改订单" :visible.sync="dialogEditFormVisible">
     
    <el-form :inline="true" ref="dataForm" :model="dataForm" label-width="120px">
  <el-form-item  label="订单编号">
    <el-input v-model="dataForm.id" :disabled="true"></el-input>
  </el-form-item>
    <el-form-item  label="用户编号">
    <el-input v-model="dataForm.uid" :disabled="true"></el-input>
  </el-form-item>
 <el-form-item  label="应支付价格">
    <el-input v-model="dataForm.payPrice"></el-input>
  </el-form-item>
   <el-form-item  label="订单状态">
     <el-select v-model="dataForm.status">
    <el-option label="未支付" value="unpaid"></el-option>
    <el-option label="已支付" value="paid"></el-option>
    <el-option label="待发货" value="notshipped"></el-option>
    <el-option label="待发货" value="shipped"></el-option>
     <el-option label="运输中" value="transiting"></el-option>
    <el-option label="已签收" value="signed"></el-option>
      <el-option label="已失效" value="invalid"></el-option>
     </el-select>
  </el-form-item>
   <el-form-item  label="收货地址">
    <el-input v-model="dataForm.address"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="doEdit()">修改</el-button>
 <el-button @click="dialogEditFormVisible = false" >关闭</el-button>
  </el-form-item>
</el-form>
  </el-dialog>
  
     
</div>
 
</template>
    
<script>
import {getOrderListByCondition,getOrderById,editOrder} from '../../api/order/order'
 export default {
     name:'OrderTable',
      data() {
        return {
            title:'订单管理',
            queryForm:{
            uid:'',
            pageNo: 1,
            pageSize: 18,
            recordTotal: 100
            },
            dialogAddFormVisible:false,
            dialogEditFormVisible:false,
            dataForm:{},
            tableData: []
        }
      }
      ,
          methods: {
              getList(){
           var _this=this;
          getOrderListByCondition(_this.queryForm).then((res)=>{
            if(res.flag){
                 
                  _this.tableData=res.data.result;
                   _this.queryForm.recordTotal=res.data.recordTotal;
                }
              
          }).catch((err)=>{
          console.log(err)
          })     
              },
               handleCurrentChange(currentPage){
              this.queryForm.pageNo=currentPage
             } ,
               showEditDialog(orderinfo){
                 getOrderById(orderinfo.id).then((res)=>{
                   if(res.flag){
                     this.dataForm=res.data;
                      this.dialogEditFormVisible = true
                   }
                 })
             },
             doEdit(){
               editOrder(this.dataForm).then((res)=>{
                 if(res.flag){
                    this.getList()
                     this.dialogEditFormVisible = false
                 }
               })
             }
          },
          created() {
            this.getList();
          }
    }
</script>
<style scoped>
.headtitle{
    text-align: left;
    padding: 5px;
    border-bottom: 1px lightgrey solid;
    color: gray;
}
.conditionForm{
     width: 80%;
    margin: 50px auto 0px auto;
}
.table{
    text-align: center !important;
    
}
.pageSty
{
  position:absolute;
  left: 75%;
  bottom:5%;
}
</style>